// 轮播
const glide = new Glide('.glide', {
    type: "carousel",
    startAt: 0,
    gap: 0,
    autoplay: 4500,
    animationDuration: 3000
})

const captionEl = document.querySelectorAll('.slide-caption')
glide.on(['mount.after', 'run.after'], () => {
    const caption = captionEl[glide.index]
    anime({
        targets: caption.children,
        opacity: [0, 1],
        duration: 400,
        easing: "linear",
        delay: anime.stagger(400, { start: 400 }),
        translateY: [anime.stagger([40, 10]), 0]
    })
})
glide.on('run.before', () => {
    document.querySelectorAll('.slide-caption > * ').forEach(el => {
        el.style.opacity = 0
    })
})
glide.mount()

// isotope 筛选
const iso = new Isotope('.cases', {
    itemSelector: '.case-item',
    layoutMode: 'fitRows'
})

const filterBtns = document.querySelector('.filter-btns')
filterBtns.addEventListener('click', e => {
    // console.log(e)
    let { target } = e
    const targetOptions = target.getAttribute('data-filter')
    if (targetOptions) {
        //给点击项目加上active
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('active')
        })
        target.classList.add('active')
    }
    iso.arrange({ filter: targetOptions })
})

// --------效果------------
// 导航栏效果
const headerEl = document.querySelector('header')

window.addEventListener('scroll', () => {
    let height = headerEl.getBoundingClientRect().height
    if (window.pageYOffset - height > 500) {
        headerEl.classList.add('sticky')
    } else {
        headerEl.classList.remove('sticky')
    }
})
// 回顶效果
const scrollToTop = document.querySelector('.scrollToTop')

window.addEventListener('scroll', () => {
    if (window.pageYOffset > 2000) {
        scrollToTop.style.display = 'block'
    } else {
        scrollToTop.style.display = 'none'
    }
})
// 滚动效果
const scrollOptions = {
    delay: 300,
    distance: '50px',
    duration: 500,
    easing: 'ease-in-out',
    origin: 'bottom'
}
// 将scrollOptions解构，然后添加interval属性，并合并成一个对象（若原本对象中有interval属性则以新添加的为准）
ScrollReveal().reveal('.feature', { ...scrollOptions, interval: 350 })
ScrollReveal().reveal('.service-item', { ...scrollOptions, interval: 350 })
// 数据增加效果
const dataSectionEl = document.querySelector('.data-section')
ScrollReveal().reveal('.data-section', {
    beforeReveal: () => {
        anime({
            targets: '.data-piece .num',
            innerHTML: el => {
                return [0, el.innerHTML]
            },
            duration: 2000,
            round: 1,
            easing: 'easeInExpo'
        })
        dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom / 5}px)`
    }
})
//section区域视差效果
window.addEventListener('scroll', () => {
    const bottom = dataSectionEl.getBoundingClientRect().bottom
    const top = dataSectionEl.getBoundingClientRect().top
    // 可见区域
    if (bottom >= 0 && top <= window.innerHeight) {
        dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom / 5}px)`
    }
    // console.log(window.innerHeight)
})
//流畅滚动
const scroll = new SmoothScroll('a[href*="#"]',{
    header:'header',/*自动计算导航栏高度*/ 
    offset:80
})
const exploreBtns = document.querySelectorAll('.explore-btn')
const anchor = document.querySelector('#about-us')
// const options = {header:'header'}
exploreBtns.forEach(el=>{
    el.addEventListener('click',()=>{
        scroll.animateScroll(anchor)
    })
})
// 自适应
const burger = document.querySelector('.burger')
burger.addEventListener('click',()=>{
    headerEl.classList.toggle('open')
})
document.addEventListener("scrollStart", () => {
    if (headerEl.classList.contains("open")) {
      headerEl.classList.remove("open");
    }
})